<template>
  <div>
    <van-sticky>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </van-sticky>

    <van-list v-if="value"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <Search-Cell
        v-for="data in computedList"
        :key="data.subjectId"
        class="feed-item"
      >
        <template v-slot:item>
          <Search-Item :data="data"> </Search-Item>
        </template>
      </Search-Cell>
    </van-list>

    <router-view></router-view>
  </div>
</template>

<script>
import { ref, onMounted, computed } from "vue";
import { Toast } from "vant";
import { useRoute, useRouter } from "vue-router";
import SearchCell from "../components/search/searchcell.vue";
import SearchItem from "../components/search/searchitem.vue";
import http from "../util/http";
export default {
  setup() {
    const router = useRouter();
    const route = useRoute();
    const dataList = ref("");
    const loading = ref(false);
    const finished = ref(false);
    const current = ref(1);
    const nextkey = ref("");
    const newnextkey = ref("");
    const hasmore = ref(true);
    const value = ref("");
    const onSearch = (val) => Toast(val);
    const onCancel = () => history.back();

    const computedList =computed(()=>{
        console.log(dataList.value);
        return dataList.value.filter(item=>item.content.user.userName.toUpperCase().includes(value.value.toUpperCase()) ||item.content.content.toUpperCase().includes(value.value.toUpperCase()))
    })

    onMounted(() => {
      http({
        url: "/api/v1/feed/search?pageIndex=1&pageSize=10&keyword=",
      }).then((res) => {
        console.log(res.data.data);
        dataList.value = res.data.data;
        hasmore.value = res.data.hasmore;
      });
    });
    const onLoad = () => {
      if (hasmore.value === false) {
        finished.value = true;
        return;
      }

      console.log("到底了");
      current.value++;
      if (current.value === 2) {
        nextkey.value = "AoIFPZ7m%2BMAAAAAtUkVWSUVXUzI3ODEzNw";
      } else {
        nextkey.value = newnextkey.value;
      }
      console.log(nextkey.value);
      http({
        url: `/api/v1/feed/search?pageIndex=${current.value}&pageSize=10&keyword=&nextPageKey=${nextkey.value}%3D%3D`,
      }).then((res) => {
        dataList.value = [...dataList.value, ...res.data.data];
        newnextkey.value = ("" + res.data.nextPageKey).slice(0, -2);
        console.log(newnextkey.value);
        loading.value = false;
      });
    };

    return {
      value,
      onSearch,
      onCancel,
      dataList,
      loading,
      finished,
      onLoad,
      current,
      nextkey,
      hasmore,
      newnextkey,
      computedList
    };
    
  },
  mounted() {
    this.$store.commit("hidden");
  },
  unmounted() {
    this.$store.commit("show");
  },
  components: {
    SearchCell,
    SearchItem,
  },
};
</script>

<style lang="scss" scoped>
.van-nav-bar {
  float: left;
  z-index: 999;
}
</style>